import React, {Component} from 'react';
import {connect} from 'react-redux'
import store from '../store'
import {multipleAddToSelected, deleteFromSelected, addToSelected} from "../actions/selected-actions";

class checkListItem extends Component {
    constructor(props) {
        super(props);
        //this.checkState = this.props.checked
    }

    handleClick() {
        // this.setState({
        //     checkState: this.checkState ? this.checkState = false : this.checkState = true
        // });
        if (!this.props.checked) {
            this.props.multiply
                ?store.dispatch(multipleAddToSelected(this.props.name, this.props.value))
                :store.dispatch(addToSelected(this.props.name, this.props.value))
        } else {
            store.dispatch(deleteFromSelected(this.props.name, this.props.value))
        }
    }

    render() {
        return (
            <div className={`w-check plural-select ${this.props.checked ? 'active' : ''}`}
                 onClick={(e) => this.handleClick(e)}
            >
                {Object.values(this.props.value)}
            </div>
        )
    }
}

const mapStateToProps = (state, ownProps) => {
    return {
        checked: state.selected[ownProps.name].find((val) => {
                return Object.is(val, ownProps.value)
            })

    }
}

export default connect(mapStateToProps)(checkListItem);